<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { viewCardAIP } from "@/api/card"
const formInline = ref({
  page: 1,
  pageSize: 3,
  carNumber: '',
  personName: '',
  cardStatus: ''
})
const total = ref('0')


// 列表渲染
const tableData = ref([])
const cardList = async () => {
  const res = await viewCardAIP(formInline.value)
  tableData.value = res.data.rows
  total.value = res.data.total

}

onMounted(() => {
  cardList()
})
// 格式换
const formatter = (row: { cardStatus: string | number; }) => {
  console.log(row, 111)
  const MAP = {
    0: '可用',
    1: '不可用'
  }
  return MAP[row.cardStatus]
}
// 设置页吗
const pagechange = (page: any) => {
  // console.log(page)
  formInline.value.page = page
  cardList()
}
const options = ref([
  {
    id: null,
    name: '全部'
  },
  {
    id: 0,
    name: '可用'
  },
  {
    id: 1,
    name: '已过期'
  }
])

// 搜索
const onSubmit = () => {
  console.log(formInline.value, 1111)
  formInline.value.pageSize = 1
  cardList()
}

const dialogVisible = ref(false)

// 添加按钮
const cardbtns = () => {
  dialogVisible.value = true
}

const formLabelAlign = ref({
  name: '',
  region: '',
  type: '',
})

const feeForm = ref({
  payTime: '',
  paymentMethod: '',
  paymentAmount
})

const payMethodList = ref([
  {
    id: 'Alipay',
    name:'支付宝'
  },
  {
    id: 'WeChat',
    name:'微信'
  },
  {
    id: 'Cash',
    name:'线下'
  },
])
</script>

<template>
  <div class="new">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.carNumber" placeholder="车牌号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.personName" placeholder="姓名" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.cardStatus" class="m-2" placeholder="状态">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查看</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="cardbtns">添加</el-button>
    <div class="bottom">
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="状态" prop="cardStatus" :formatter="formatter" />

        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />

        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination :page-size=formInline.pageSize :pager-count="11" layout="total, prev, pager, next" :total=total
          @current-change="pagechange" />
      </div>
    </div>

    <el-dialog
    v-model="dialogVisible"
    title="添加"
    width="50%"
  >
  <el-form
    label-position="right"
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 460px"
  >
    <el-form-item label="车主姓名">
      <el-input v-model="formLabelAlign.region" />
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
    <el-form-item label="车牌号码">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
    <el-form-item label="车辆品牌">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
        v-model="feeForm.payTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item label="支付金额">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
    <el-form-item label="支付方式">
      <el-select v-model="feeForm.paymentMethod" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in payMethodList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button>
      </span>
    </template>
  </el-dialog>

  </div>
</template>

<style scoped lang="scss">
:deep .el-select {
  width: 200px;
}
.pages {
  float: right;
}

.example-pagination-block+.example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

.new {
  width: 100%;
  height: 100%;

  .head {
    width: 100%;
  }

  .bottom {
    width: 100%;
    height: 500px;
  }
}
</style>